<main id="content-container" class="container" role="main">
  <div class="row" style="margin-top:20px;">

    <div class="col-md-10 col-md-offset-1 well bg-dark" style="min-height:600px;">

      <div class="jumbotron">
        <h1>Fighter Profiles</h1>
        <% if @fighters.blank? %>
          <p>You currently do not any fighter profiles yet, create a new fighter now.
          </p>
        <% else %>
          <p>Here is a list of fighter profiles you've created.
          </p>
        <% end %>
        <%= link_to "Create Fighter", new_fighter_path, :class=>"btn btn-success btn-lg", :role=>"button" %>
      </div>

      <div class="col-md-10 col-md-offset-1" style="margin-top:30px; margin-bottom:30px;">

        <% for @fighter in @fighters %>

          <div class="media" style="color: white;">

            <div class="pull-left" style="width:190px;">
              <%= link_to image_tag(fighter_avatar_url(@fighter), :class=>"media-object img-thumbnail img-mid"), fighter_path(@fighter) %>
            </div>
          
            <div class="pull-left" style="width:250px;">
              <h4 class="media-heading red"><strong><%= @fighter.nickname.upcase %></strong></h4>
              <h4><%= @fighter.name.upcase %></h4>
              <p>Joined: <%= @fighter.created_at.strftime('%Y-%m-%d') %></p>
              <p>Age: <%= age(@fighter.born)%></p>
              <p>Height: <%= @fighter.height %></p>
              <p>Weight: <%= @fighter.weight %> lbs</p>
              <p>Resides: <%= @fighter.city%></p>
              <p>Ladder: <%= @fighter.ladder.city%></p>
              <p>Blood: <%= @fighter.points %></p>
              <p><strong>13-2-2 (W-L-D)</strong></p>

            </div>
            <div class="pull-left" style="width:250px;">
              <p>This is user sign in action section </p>
              <p>Place ladder, switch ladder - use drop collection for available ladders </p>
              <p>Drop me from next round - Sign me up for next round </p>
              <p>Balance - Good for N more fights - Refill</p>


            </div>
          </div>
        <% end %>
      </div>
    </div>

  </div>
</main>

